﻿<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>幻灯片</title>
		<style type="text/css">
			#flash {
				width: 500px;
				height: 300px;
				border: 2px #0C3 solid;
				position: relative;
				overflow: hidden;
			}
			
			img {
				width: 500px;
				height: 300px;
			}
			
			ul {
				margin: 0px;
				padding: 0px;
				list-style: none;
				position: absolute;
			}
			
			ul li {
				width: 500px;
				overflow: hidden;
				float: left;
			}
		</style>
	</head>

	<body>
		<h1>案例三定宽情况下幻灯片运动</h1>
		<h2 id="h2"></h2>
		<div id="flash">
			<ul id="flashul">
				<li>
					<a href="#"><img src="img/hf1.jpg" alt="合肥野生动物园" /></a>
				</li>
				<li>
					<a href="#"><img src="img/hf2.jpg" alt="合肥天鹅湖" /></a>
				</li>
				<li>
					<a href="#"><img src="img/hf3.jpg" alt="合肥天鹅湖万达广场" /></a>
				</li>
				<li>
					<a href="#"><img src="img/hf4.jpg" alt="合肥天鹅湖万达广场" /></a>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var Quint = {
				easeIn: function(t, b, c, d) {
					var rs = c * (t /= d) * t * t * t * t + b;
					return Math.ceil(rs); //返回一个整数
				},
				easeOut: function(t, b, c, d) {
					var rs = c * ((t = t / d - 1) * t * t * t * t + 1) + b;
					return Math.ceil(rs);
				},
				easeInOut: function(t, b, c, d) {
					var rs = 0;
					if((t /= d / 2) < 1) {
						rs = c / 2 * t * t * t * t * t + b;
					} else {
						rs = c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
					}
					return Math.ceil(rs);
				},
				easeT: function(t, b, c, d) {
					var rs = -c * ((t = t / d - 1) * t * t * t - 1) + b;
					return Math.ceil(rs);
				}
			}
			//统一函数
			var fnMove = Quint.easeT;
			var change = 500,
				duration = 50,
				begin = 0,
				time = 0; //初始化参数

			//初始化参数
			var f = document.getElementById("flash");
			var fu = document.getElementById("flashul");
			var h2 = document.getElementById("h2");
			var lis = fu.getElementsByTagName("li");
			var l = lis.length;
			//根据li计算ul的宽度
			fu.style.width = l * lis[0].offsetWidth + "px";

			//核心函数
			function A(index) {

				index < 0 && (index = l - 1) || index >= l && (index = 0);
				time++;
				begin = index * change;
				this.t = -index * change;
				this._b = parseInt(fu.style.left) || 0;
				this.c = this.t - this._b;
				h2.innerHTML = this.c + "_B: " + this._b;
				//控制每张图片从开始运动到结束
				if(this.c && time < duration) {
					fu.style.left = fnMove(time, this._b, this.c, duration) + "px";
					setTimeout(function() {
						A(index);
					}, 50);
				} else {
					time = 0;
					setTimeout(function() {
						A(++index);
					}, 1000);
				}
			}
			A(0);
		</script>
	</body>

</html>